<template>
  <div class="side-panel">
    <!-- 四预能力进度环卡片 -->
    <div class="panel-section progress-section">
      <div class="panel-title">全省四预系统建设情况</div>
      <div class="progress-card">
        <div class="progress-ring-box">
          <svg class="progress-ring" width="80" height="80">
            <circle class="ring-bg" cx="40" cy="40" r="34" stroke-width="8" fill="none" />
            <circle class="ring-bar" cx="40" cy="40" r="34" stroke-width="8" fill="none"
              :stroke-dasharray="2 * Math.PI * 34" :stroke-dashoffset="2 * Math.PI * 34 * (1 - 0.7)" />
          </svg>
          <div class="progress-ring-center">
            <div class="progress-percent">70%</div>
            <div class="progress-label">建设率</div>
          </div>
        </div>
        <div class="progress-status-list">
          <div class="progress-status-item done">
            <span class="icon"></span>
            <span class="label">已建设(座)</span>
            <span class="value">280</span>
          </div>
          <div class="progress-status-item undone">
            <span class="icon"></span>
            <span class="label">未建设(座)</span>
            <span class="value">120</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 各地市四预建设情况柱状图（ECharts） -->
    <div class="panel-section">
      <div class="panel-title">各地市四预建设情况</div>
      <div ref="cityBarChart" style="width: 100%; height: 200px;"></div>
    </div>
    <!-- 表格 -->
    <div class="panel-section">
      <!-- <div class="panel-title">水库信息</div> -->
      <div class="search-bar-row">
        <input class="search-input" placeholder="请输入水库名称" />
        <button class="search-btn">
          <span class="search-icon"></span>
          检索
        </button>
        <select class="province-select">
          <option>黑龙江省</option>
          <option>吉林省</option>
          <option>辽宁省</option>
          <!-- 可根据需要添加更多省份 -->
        </select>
      </div>
      <div class="table-box">
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>水库名称</th>
              <th>工程规模</th>
              <th>行政区划</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, idx) in tableData" :key="row.name">
              <td>{{ idx + 1 }}</td>
              <td>{{ row.name }}</td>
              <td>{{ row.scale }}</td>
              <td>{{ row.region }}</td>
              <td><a href="#" class="table-link">详情</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 图例 -->
    <!-- <div class="panel-section legend-section">
      <div class="legend-title">图例</div>
      <div class="legend-list">
        <div class="legend-item" v-for="item in legendList" :key="item.label">
          <span class="legend-color" :style="{background: item.color}"></span>
          <span class="legend-label">{{item.label}}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

defineOptions({
  name: 'SidePanel'
})

const barData = [
  { name: '哈尔滨', value: 253 },
  { name: '大庆', value: 295 },
  { name: '鸡西', value: 135 },
  { name: '齐齐哈尔', value: 120 },
  { name: '双鸭山', value: 168 }
]

const cityBarChart = ref()

onMounted(() => {
  const chart = echarts.init(cityBarChart.value);
  chart.setOption({
    // 1. 基础布局（保持原图边距）
    grid: {
      left: '3%',
      right: '0%',
      top: '15%',
      bottom: '0%',
      containLabel: true
    },

    // 2. X轴配置（地市名称）
    xAxis: {
      type: 'category',
      data: ['哈尔滨', '大庆', '绥化', '齐齐哈尔', '双鸭山'], // 保持原图5个城市
      axisLabel: {
        color: '#ffffff',
        fontSize: 14,
        interval: 0
      },
      axisLine: {
        lineStyle: {
          color: '#35a7e0',
          width: 1
        }
      },
      axisTick: {
        alignWithLabel: true,
        length: 8,
        lineStyle: {
          color: '#35a7e0'
        }
      }
    },

    // 3. Y轴配置（关键修改部分）
    yAxis: {
      type: 'value',
      min: 0,
      max: 150, // 最大刻度150
      interval: 50, // 固定间隔50
      axisLabel: {
        color: '#ffffff',
        fontSize: 12,
        formatter: (value: number) =>
          [0, 50, 100, 150].includes(value) ? value : '' // 只显示指定刻度
      },
      axisLine: {
        lineStyle: {
          color: '#35a7e0',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(53, 167, 224, 0.3)',
          type: 'dashed'
        }
      }
    },

    // 4. 柱状图系列（完全保持原图样式）
    series: [{
      type: 'bar',
      barWidth: '20%',
      data: [
        { value: 253, name: '哈尔滨' },
        { value: 295, name: '大庆' },
        { value: 135, name: '绥化' },
        { value: 120, name: '齐齐哈尔' },
        { value: 168, name: '双鸭山' }
      ],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#7fe0fc' },
          { offset: 0.5, color: '#6dd6f0' },
          { offset: 1, color: '#56c5dd' }
        ]),
        borderRadius: [4, 4, 0, 0]
      },
      label: {
        show: true,
        position: 'top',
        color: '#5b9dae',
        fontSize: 14,
        formatter: '{c}' // 保持"座"单位
      }
    }],

    // 5. 单位标注（位置/样式与图片完全一致）
    graphic: [{
      type: 'text',
      left: '3%',
      top: '1%',
      style: {
        text: '单位（座）',
        fill: '#ffffff',
        fontSize: 12,
      }
    }]
  });
})

const tableData = [
  { name: '大顶子山水库', scale: '大型', region: 'XXX' },
  { name: '尼尔基水库', scale: '大型', region: 'XXX' },
  { name: '龙头桥水库', scale: '大型', region: 'XXX' },
  { name: '大顶子山水库', scale: '大型', region: 'XXX' },
  { name: '尼尔基水库', scale: '大型', region: 'XXX' },
  { name: '龙头桥水库', scale: '大型', region: 'XXX' },
  { name: '尼尔基水库', scale: '大型', region: 'XXX' },
  { name: '龙头桥水库', scale: '大型', region: 'XXX' },
  { name: '大顶子山水库', scale: '大型', region: 'XXX' }
]
const legendList = [
  { label: '大型', color: '#00eaff' },
  { label: '中型', color: '#00ffb0' },
  { label: '小I型', color: '#ffea00' },
  { label: '小II型', color: '#ff7b00' },
  { label: '其他', color: '#fff' }
]
</script>

<style scoped>
.side-panel {
  position: absolute;
  top: 80px;
  left: 0;
  width: 500px;
  /* background: linear-gradient(135deg, #0a1a2acc 80%, #1a2a4acc 100%); */
  color: #fff;
  border-radius: 12px;
  /* box-shadow: 0 0 24px #00cfff44; */
  padding: 18px 18px 12px 18px;
  z-index: 50;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  /* backdrop-filter: blur(6px); */
  opacity: 0.96;
  background: linear-gradient(90deg, rgba(19, 66, 112, 0.6) 27%, rgba(255, 255, 255, 0) 100%);
}

.panel-section {
  margin-bottom: 18px;
}

.panel-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 9px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #00cfff88;
}

.progress-section {
  margin-bottom: 18px;
}

.progress-card {
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, #0a1a2acc 80%, #1a2a4acc 100%);
  border-radius: 12px;
  box-shadow: 0 0 16px #00cfff33;
  padding: 12px 18px 12px 8px;
  min-height: 100px;
  gap: 18px;
}

.progress-ring-box {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
}

.ring-bg {
  stroke: #1a3a5a;
  opacity: 0.5;
}

.ring-bar {
  stroke: url(#progress-gradient);
  stroke: #00eaff;
  filter: drop-shadow(0 0 6px #00eaff99);
  transition: stroke-dashoffset 0.6s;
}

.progress-ring-center {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.progress-percent {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px #00eaff99;
}

.progress-label {
  font-size: 14px;
  color: #b0eaff;
  margin-top: 2px;
}

.progress-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 18px;
}

.progress-status-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  gap: 8px;
}

.progress-status-item .icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 2px;
}

.progress-status-item.done .icon {
  background: linear-gradient(90deg, #00ffb0 0%, #00eaff 100%);
}

.progress-status-item.undone .icon {
  background: linear-gradient(90deg, #ff7b00 0%, #ffea00 100%);
}

.progress-status-item.done .label {
  color: #00eaff;
}

.progress-status-item.undone .label {
  color: #ff7b00;
}

.progress-status-item .value {
  font-size: 20px;
  margin-left: 8px;
  color: #fff;
  text-shadow: 0 0 6px #00eaff;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  height: 196px;
  background: #112244cc;
  border-radius: 8px;
  padding: 12px 8px 0 8px;
  gap: 12px;
  margin-bottom: 8px;
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
}

.bar-label {
  font-size: 14px;
  margin-bottom: 4px;
  color: #b0eaff;
}

.bar-outer {
  width: 24px;
  height: 100px;
  background: #223355;
  border-radius: 12px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: relative;
}

.bar-inner {
  width: 100%;
  background: linear-gradient(180deg, #00eaff 0%, #00ffb0 100%);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 8px #00cfff88;
  transition: height 0.5s;
}

.bar-value {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: #00eaff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 0 6px #00cfff;
}

.table-box {
  background: #112244cc;
  border-radius: 8px;
  padding: 8px 0;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  font-size: 14px;
}

th,
td {
  padding: 6px 8px;
  border-bottom: 1px solid #1a2a4a;
  text-align: center;
}

th {
  background: #1a2a4a;
  font-weight: bold;
}

.table-link {
  color: #00eaff;
  text-decoration: underline;
  cursor: pointer;
}

.legend-section {
  margin-top: 12px;
}

.legend-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #00eaff;
}

.legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.legend-color {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-right: 6px;
  border: 2px solid #fff3;
  box-shadow: 0 0 6px #00cfff88;
}

.search-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  margin-top: 2px;
}

.search-input {
  height: 24px;
  width: 180px;
  border: none;
  border-radius: 6px 0 0 6px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 15px;
  padding: 0 12px;
  outline: none;
  box-shadow: 0 0 8px #00cfff33;
  transition: border 0.2s;
}

.search-input::placeholder {
  color: #bfe6ff;
  opacity: 0.7;
  font-size: 14px;
}

.search-btn {
  height: 24px;
  border: none;
  border-radius: 0 6px 6px 0;
  background: rgba(53, 167, 224, 0.7);
  color: #fff;
  font-size: 15px;
  padding: 0 18px 0 36px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 8px #00cfff33;
  margin-left: -6px;
  transition: background 0.2s;
}

.search-btn:hover {
  background: #35a7e0;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg fill=\"none\" stroke=\"white\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><line x1=\"18\" y1=\"18\" x2=\"15.5\" y2=\"15.5\"/></svg>') no-repeat center/contain;
  opacity: 0.8;
  pointer-events: none;
}

.province-select {
  height: 24px;
  min-width: 110px;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 15px;
  padding: 0 18px 0 12px;
  margin-left: 12px;
  box-shadow: 0 0 8px #00cfff33;
  appearance: none;
  outline: none;
  position: relative;
}

.province-select:focus {
  border: 1.5px solid #35a7e0;
}

.province-select option {
  color: #222;
  background: #fff;
}
</style>

<style>
html, body, #app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>